<template>
    <div class="goodsList page">
        <formHeader v-if="saleTypeMap[saleType]" :title="saleTypeMap[saleType].name"></formHeader>
        <formHeader v-else title="查询"></formHeader>
        <div class="search">
          <div class="form">
            <div class="inp">
              <img class="icon" src="../home/image/search.png" alt="">
              <input v-model="goodsName" type="text" class="input" placeholder="请输入您要搜索的商品">
            </div>
            <div class="btn" v-if="goodsName" @click="goodsName=null">重置</div>
            <div class="btn" v-else @click="goodsName=null">搜索</div>
          </div>
          <div class="types">
              <div class="all" @click="type=null" :class="{sel:!type}">全部</div>
              <div class="items">
                <div @click="selType(item.id)" :class="{sel:item.id==type}" class="item" v-for="(item,index) in typeFilter" :key="index">
                  <div class="name">{{item.name}}</div>
                </div>
              </div>
              <div class="more" @click="showType=!showType">
                <img src="./more.png" alt="" class="icon">
              </div>
          </div>

        </div>

      <div class="all-types" v-if="showType">
        <span class="name">全部分类</span>
        <div class="items">
          <div class="item all" @click="type=null" :class="{sel:!type}"><span>全部</span></div>
          <div class="item" @click="selType(item.id,index)" :class="{sel:item.id==type}" v-for="(item,index) in typeFilter" :key="index">
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
      <div class="list1">
        <cube-scroll
                :data="goodsList"
                :options="options"
                ref="scroll"
                @pulling-up="onPullingUp">
            <twoList class="list" :list="goodsFilter" v-slot="scope">
              <goodsItem :item="scope.item"></goodsItem>
            </twoList>
        </cube-scroll>
        <div v-if="flag" @click="turn('/point/sign')" class="skipTo">
            <img src="./qiandao2.png"/>
        </div>
    </div>
    </div>
</template>

<script>
    import twoList from '@/components/two-list/two-list'
    import goodsItem from '@/components/goods-item'
    import {getGoods,getSaleType} from '@/api/home'
    import formHeader from '@/components/form-header'
    import {showLoading,hide} from "@/toast"
    export default {
        name : "index",
        components:{twoList,formHeader,goodsItem},
        data(){
            return{
                goodsName:null,
                showType:false,
                type:null,
                saleType:0,
                page:1,
                size:1000,
                goodsList:[],
                typeList:[],
                options: {
                    pullUpLoad: true,
                },
                ways:'',
                name:'',
                saleTypeMap: { },
                flag:false
            }
        },
        computed:{
          goodsFilter(){
            return  this.goodsList.filter(goods=>{
                let flag = true
                if(this.goodsName&&goods.name.indexOf(this.goodsName)<0){
                  flag = false
                }
                if(this.type&&goods.type!=this.type){
                  flag = false
                }
                return flag
            })
          },
          typeFilter(){
           let typeIds =  this.goodsList.map(goods=>goods.type)
            let res =  this.typeList.filter(type=>{
             return  typeIds.indexOf(type.id)>-1
            })
           return res
          },
        },
        activated(){
            showLoading('正在加载')
            this.flag = false
            this.goodsList=[]
            this.page = 1
            this.type=this.$route.query.type
            this.saleType=this.$route.query.saletype
            this.ways = this.$route.query.ways
            this.goodsName = this.$route.query.name
            this.$refs.scroll.scrollTo(0,0,0)
            // console.log(this.saleType)
            // console.log(this.type)
            this.onPullingUp()
            getSaleType().then(res=>{
              this.typeList = res.extra.types
              res.data.forEach(type=>{
                this.saleTypeMap[type.id] = type
              })
            })

        },
        methods:{
          selType(id,index){
            this.showType = false
            this.type = id
            if(index>=0){
              let item =  this.typeFilter.splice(index,1)
              this.typeFilter.splice(0,0,item[0])
            }
          },
            getGoods(){
              getGoods(this.saleType,this.page,this.size).then(res => {
                if(res.data.length>0){
                  this.goodsList = this.goodsList.concat(res.data)
                  this.page++
                }
              })
            },
            onPullingUp(){
                this.getGoods()
            },
            turn(path){
                this.$router.push({
                    path:path
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
.goodsList
    background-color #94B7B3
    overflow hidden
    top 45px
    position relative
    height 100%
    padding-bottom 50px
    .list1
      height calc(100% - 100px)
      padding 11px  11px
      overflow hidden
    .search
      background-color white
      padding 10px 9px 12px
      .types
        background white
        margin-top 15px
        display flex
        align-items center
        height 25px
        .all
          white-space nowrap
          flex 0 0 49px
          width: 49px;
          height: 25px;
          border-radius: 13px;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          text-align center
          line-height 25px
          margin-right 12px
          &.sel
            background: #FE4B38;
            color: #FFFFFF;
        .items
          height 100%
          display flex
          align-items center
          overflow scroll
          flex 1
          &::-webkit-scrollbar
            display none
          .item
            white-space nowrap
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-right 23px
            &.sel
              color: #FE4B38;
        .more
          width 17px
          height 17px
          margin-left 10px
          .icon
            display block
            width 100%
            height 100%
            object-fit cover
      .form
        overflow hidden
        display flex
        align-items center
        height 32px
        .btn
          width: 67px;
          height: 100%;
          border-radius 5px
          background-color #FE4B38
          color white
          font-size 14px
          display flex
          align-items center
          justify-content center
          margin-left 7px
        .inp
          border-radius 5px
          overflow hidden
          height 100%
          flex 1
          background-color #EEEEEE
          color: #C9C9C9;
          display flex
          align-items center
          .input
            width 100%
            font-size 14px
            outline none
            border none
            background none
          .icon
            padding 0 5px
            width 18px
            height 18px
  .all-types
    padding 13px 9px
    background-color white
    border-top 1px solid #EBEBEB
    height 100%
    .name
      display block
      font-size: 15px;
      color: #000000;
      margin-bottom 13px
    .items
      padding-bottom 20px
      display flex
      flex-wrap wrap
      align-content flex-start
      justify-content space-between
      padding-right 10px
      height 100%
      overflow scroll
      .item
        display flex
        align-items center
        justify-content center
        white-space nowrap
        flex 0 0 74px
        width: 74px;
        height: 25px;
        margin-bottom 15px
        background-color #EEEEEE
        &.sel
          background-color #FE4B38
          span
            color white
        span
          font-size: 13px;
          color #333333;
</style>
